<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    .outer,
    .left,
    .middle,
    .right {
      height: 100px;
      margin-bottom: 5px;
    }

    .left {
      background-color: tomato;
    }

    .middle {
      background-color: lightgreen;
    }

    .right {
      background-color: gold;
    }

    /* 左右分别设置绝对定位，中间设置外边距 */
    .outer1 {
      position: relative;
    }

    .outer1 .left {
      position: absolute;
      width: 100px;
    }

    .outer1 .middle {
      margin: 0 200px 0 100px;
    }

    .outer1 .right {
      position: absolute;
      top: 0;
      right: 0;
      width: 200px;
    }

    /*flex布局  */
    .outer2 {
      display: flex;
    }

    .outer2 .left {
      width: 100px;
    }

    .outer2 .middle {
      flex: 1;
    }

    .outer2 .right {
      width: 200px;
    }

    /* 浮动 在html中 middle要放在最后*/
    .outer3 .left {
      float: left;
      width: 100px;
    }

    .outer3 .middle {
      margin: 0 200px 0 100px;
    }

    .outer3 .right {
      float: right;
      width: 200px;
    }

    .outer4 {
      padding-left: 100px;
      padding-right: 200px;
    }

    .outer4 .left {
      position: relative;
      left: -100px;
      float: left;
      margin-left: -100%;
      width: 100px;
    }

    .outer4 .right {
      position: relative;
      left: 200px;
      float: left;
      margin-left: -200px;
      width: 200px;
    }

    .outer4 .middle {
      float: left;
      width: 100%;
    }

    /* 双飞翼布局 */
    .outer5 .left {
      float: left;
      margin-left: -100%;
      width: 100px;
    }

    .outer5 .right {
      float: left;
      margin-left: -200px;
      width: 200px;
    }

    .outer5 .wrapper {
      float: left;
      width: 100%;
    }

    .outer5 .middle {
      /* 双飞翼和圣杯的差别就在这里，当wrapper里面再嵌套一个盒子后，就可以直接设置margin来调整宽度，而不影响外边的盒子，两边的就不用再定位了 */
      margin-left: 100px;
      margin-right: 200px;
    }
  </style>
</head>

<body>
  <p>绝对定位：</p>
  <div class="outer outer1">
    <div class="left">1-left</div>
    <div class="middle">1-middle</div>
    <div class="right">1-right</div>
  </div>
  <p>flex：</p>
  <div class="outer outer2">
    <div class="left">2-left</div>
    <div class="middle">2-middle</div>
    <div class="right">2-right</div>
  </div>
  <p>浮动：</p>
  <div class="outer outer3">
    <div class="left">3-left</div>
    <div class="right">3-right</div>
    <div class="middle">3-middle</div>
  </div>
  <p>圣杯：</p>
  <div class="outer outer4">
    <div class="middle">4-middle</div>
    <div class="left">4-left</div>
    <div class="right">4-right</div>
  </div>
  <p>双飞翼：</p>
  <div class="outer outer5">
    <div class="wrapper">
      <div class="middle">5-middle</div>
    </div>
    <div class="left">5-left</div>
    <div class="right">5-right</div>
  </div>
</body>

</html>